import { Button, Drawer } from "antd";
import { useParams } from "react-router-dom"
import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { RoleType } from "@/types/user";
import RoleForm from "./components/RoleForm";
import { roleGet } from "@/api/user";
import { mapRoutesTool } from "@/utils/tools";


type Props = {}

export default function Role({}: Props) {
  const [open, setOpen] = useState(false);
  const [roleList,setRoleList] = useState([])
  const routeMap = mapRoutesTool()


  const columns: ColumnsType<RoleType> = [
    {
      title: '角色名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '角色权限',
      dataIndex: 'permission',
      key: 'permission',
      render:(value:Array<string>)=>{
        return value.map(path=><Tag color="blue" key={path}>{routeMap[path]}</Tag>)
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" size="small">编辑</Button>
          <Button type="primary" danger size="small">删除</Button>
          
        </Space>
      ),
    },
  ];
  useEffect(()=>{
    roleGet().then(res=>{
      setRoleList(res.data.results)
    })
  },[])
  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  return (
    <div>
      
      <Button type="primary" onClick={showDrawer}>
        新增角色
      </Button>
          
      <Table columns={columns} dataSource={roleList} rowKey="objectId"/>;
      <Drawer title="角色新增" placement="right" onClose={onClose} open={open}>
        <RoleForm/>
      </Drawer>
    </div>
  )
}